<template>
  <el-container class="home_container">
    <el-header class="home_header">
      <div class="home_title">DORMS宿舍管理系统-宿舍管理员</div>
      <div class="home_userinfoContainer">
        <el-dropdown>
          <span class="el-dropdown-link home_userinfo">
            {{admin.name}}<i class="el-icon-arrow-down el-icon--right home_userinfo"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside class="home_aside" width="200px">
        <el-menu :router="true" :default-active="$route.path">
          <el-menu-item index="/absentRegister">
            <el-icon><document /></el-icon>
            <span>学生缺寝登记</span>
          </el-menu-item>
          <el-menu-item index="/absentRecord">
            <el-icon><warning /></el-icon>
            <span>学生缺寝记录</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.meta?.title || $route.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view />
        </el-main>
        <el-footer class="home_footer">这是宿舍管理系统</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Document, Warning } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()
const admin = ref({})

const logout = async () => {
  try {
    await ElMessageBox.confirm('确定要注销登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    localStorage.removeItem('dormitoryAdmin')
    router.replace('/login')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('注销失败')
    }
  }
}

onMounted(() => {
  admin.value = JSON.parse(localStorage.getItem('dormitoryAdmin')) || {}
})
</script>

<style scoped>
.home_container {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}

.home_header {
  background-color: #2B2B2B;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: white;
}

.home_title {
  color: #C2C2C2;
  font-size: 1.2rem;
}

.home_userinfo {
  color: #fff;
  cursor: pointer;
}

.home_userinfoContainer {
  margin-right: 20px;
}

.home_aside {
  background-color: #FFFFFF;
  height: calc(100vh - 60px);
}

.home_footer {
  background-color: #FFFFFF;
  color: #000000;
  font-size: 0.9rem;
  line-height: 60px;
  text-align: center;
}

.el-menu {
  border-right: none;
}

.el-main {
  padding: 20px;
}
</style>